

<template>
  <div class="app">
    <h2>toRaw和markRaw</h2>
    <h4>姓名: {{ person.name }}</h4>
    <h4>年龄: {{ person.age }}</h4>
    <button @click="person.age++">修改年龄</button>
    <br><br><br><br>

    <h4>车: {{ car }}</h4>

  </div>

</template>

<script setup lang="ts" name="App">
  import { ref,reactive, toRaw, markRaw } from 'vue';

  let person = reactive({
    name: 'toy',
    age: 19
  })
  console.log('响应式数据',person) // proxy代理的数据
  // 获取一个响应式对象的原始对象
  let p2 = toRaw(person)
  console.log('原始数据', p2) // proxy代理的数据
  

  const showPerson = (p) => {
    p.age += 10
    p.name += '~'
  }
  // 这样改的数据只在函数中修改, 本体是不变的,不会响应到页面上
  showPerson(p2)




  // markRaw mockjs使用场景 
  let car = markRaw({
    brand: 'bmw',
    price: 100
  }) 

  let car2 = reactive(car)

  console.log(car)
  console.log(car2)
  








</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  padding: 20px;
}


</style>
